<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>确认订单</title>
    <script src="../lib/jquery-3.4.1.js"></script>
    <script src="../lib/constant.js"></script>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <style>
        *{
            font-family: "微软雅黑 Light";
        }
        .main{
            margin-top: 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .dishes{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 86%;
            padding: 20px 4%;
            border: 1px solid #CCCCCC;
            border-radius: 5px;
        }
        .dishItem{
            font-size: 16px;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            margin-top: 5px;
            margin-bottom: 5px;
        }
        .orderInfo{
            height: 150px;
            width: 86%;
            padding: 20px 4%;
            border: 1px solid #CCCCCC;
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: flex-start;
            font-size: 16px;
        }
    </style>
</head>
<body>
<div class="main">
    <h3 style="margin:10px 0;">用餐信息</h3>
    <div id="orderInfo" class="orderInfo"></div>
    <h3 style="margin: 10px 0;">已选菜品</h3>
    <div id="dishes" class="dishes">
        <!--已选菜品信息-->
    </div>
    <div style="text-align: left;width: 92%;">
        <h2 style="margin: 10px 0;" id="subTotal">总计XXX元</h2>
    </div>
    <button class="layui-btn layui-btn-normal" style="width: 100%;font-size: 20px;padding: 5px;height: 50px;" onclick="makeOrder()">付款下单</button>
</div>

<div style="border-bottom:1px solid #CCCCCC;position:fixed;left:0;top:0;display: flex;flex-direction: row;align-items: center;justify-content: space-between;width: 100%;height: 50px;background-color: white;">
    <div style="font-size: 20px;padding: 5px;font-weight: 600;flex:2;"><a href="make2.html">←</a></div>
    <div style="flex:7;text-align: center;font-size: 20px;">确认订单</div>
    <div style="flex:2;"></div>
</div>

</body>
<script>

    var cart=[];
    var count=0;
    $(function () {
        $.ajax({
            async:false,                            //不允许异步，只有在获取到订单信息并打印后才继续处理其他请求，优先渲染
            type: 'get',
            url: RequestURL + '/getPreOrderInfo',
            success: function (data) {
                if(data.type==0){
                    $("#orderInfo").html("<div style='flex:1;'>店内就餐</div><div style='flex:1;'>"+data.name+"</div><div style='flex:1;'>"+data.tele+"</div><div style='flex:1;'>桌号:"+data.tid+"</div>");
                }
                else if(data.type==1){
                    $("#orderInfo").html("<div style='flex:1;'>外卖送餐</div><div style='flex:1;'>"+data.name+"</div><div style='flex:1;'>"+data.tele+"</div><div style='flex:2;'>"+data.address+"</div>");
                }
            }
        });
        cart=getCookie("cart");
        cart = cart.substring(0,cart.lastIndexOf(']')+1);
        cart=JSON.parse(cart);
        let result="";
        for(let i=0;i<cart.length;i++){
            count+=cart[i].number*cart[i].dprice;                   //合计价格
            result+="<div class=\"dishItem\">\n" +
                "            <div style=\"width: 40%;text-align: left;\">"+cart[i].dname+"</div>\n" +
                "            <div style=\"width: 30%;text-align: center;\">￥"+cart[i].dprice.toFixed(2)+"/份</div>\n" +
                "            <div style=\"width: 20%;text-align: center;\">"+cart[i].number+"份</div>\n" +
                "        </div>";
        }
        $("#dishes").html(result);
        $("#subTotal").html("总计 ￥"+count.toFixed(2)+"元");
    });


    //付款并提交订单
    function makeOrder() {
        if(confirm("现在付款吗？")){
            let dids="";
            for(let i=0;i<cart.length;i++){
                dids+=cart[i].did+"-"+cart[i].number;
                if(i<cart.length-1){
                    dids+=",";
                }
            }
            $.ajax({
                type: 'post',
                url: RequestURL + '/makeOrder',
                data:{
                    "money":count,
                    "dids":dids
                },
                success: function (data) {
                    delCookie("cart");
                    window.location.href="makeOrderSuccess.html";
                }
            });
        }
    }
</script>
</html>

